<template>
  <div>
    <el-header>
      <div style="width:930px;float:left">
        <el-form size="mini" :inline="true" :model="formInline">
          <el-form-item label="日期">
            <el-date-picker
              v-model="formInline.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              style="width:320px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="病人种类">
            <el-select v-model="formInline.patientType" placeholder="请选择" class="option">
              <el-option
                v-for="item in patientTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label>
            <el-button type="primary">按临床科室统计</el-button>
          </el-form-item>
          <el-form-item label="血液统计单位:U">
            <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-form size="mini" style="width:1000px" :inline="true" :model="formInline">
          <el-form-item label="血型">
            <el-select v-model="formInline.bloodType" placeholder="请选择" class="option">
              <el-option
                v-for="item in bloodTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="血液品种">
            <el-select v-model="formInline.bloodSeed" placeholder="请选择" class="option">
              <el-option
                v-for="item in bloodSeeds"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="病人科室">
            <el-select v-model="formInline.patientOrg" placeholder="病人科室" class="option">
              <el-option
                v-for="item in patientOrgs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label>
            <el-button type="primary">按临床医师统计</el-button>
            <el-button type="primary"  icon="el-icon-upload2" @click="exportData()">导出</el-button>
            <el-button type="primary" icon="el-icon-printer"  @click="printData()">打印</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="searchDiv">
        <el-button :type="buttonType1" @click="selectType(1)" class="buttonType">
          <i class="el-icon-s-grid"></i>
          <br />表格
        </el-button>
        <el-button :type="buttonType2" @click="selectType(2)" class="buttonType">
          <i class="el-icon-pie-chart"></i>
          <br />饼状图
        </el-button>
        <el-button :type="buttonType3" @click="selectType(3)" class="buttonType">
          <i class="el-icon-office-building"></i>
          <br />柱状图
        </el-button>
      </div>
    </el-header>
    <el-main style="padding:70px 5px;clear:both">
      <!-- 表格 -->
      <div>
        <statisticsTable v-show="tableShow" :tableColum="tableColum" :tableData="tableData"></statisticsTable>
      </div>
      <!-- 饼状图 -->
      <div>
        <pieChartStatics v-show="pieChartShow" :tableColum="tableColum" :tableData="tableData"></pieChartStatics>
      </div>
      <!-- 柱状图 -->
      <div>
        <barChartStatics v-show="barChartShow" :tableColum="tableColum" :tableData="tableData"></barChartStatics>
      </div>
    </el-main>
    <el-footer>
      <div>
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[30, 50, 100, 200]"
          :page-size="30"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>-->
      </div>
    </el-footer>
  </div>
</template>
<script>
import statisticsTable from "../components/useBloodCase/statisticsTable";
import pieChartStatics from "../components/useBloodCase/pieChartStatics";
import barChartStatics from "../components/useBloodCase/barChartStatics";
export default {
  data() {
    return {
      formInline: {
        date: "",
        patientType: "", //病人种类
        bloodType: "", //血型
        bloodSeed: "", //血液晶种
        patientOrg: "", //病人科室
      },
      selectTypeVal: 0,
      buttonType1: "info",
      buttonType2: "",
      buttonType3: "",
      // total: 100,
      // PageIndex: 1,
      // PageSize: 30,
      patientTypes: [
        {
          lable: "1",
          value: "病人种类一",
        },
        {
          lable: "2",
          value: "病人种类二",
        },
      ],
      bloodTypes: [
        {
          lable: "1",
          value: "血型一",
        },
        {
          lable: "2",
          value: "血型二",
        },
      ],
      bloodSeeds: [
        {
          lable: "1",
          value: "血液晶种一",
        },
        {
          lable: "2",
          value: "血液晶种二",
        },
      ],
      patientOrgs: [
        {
          lable: "123",
          value: "科室一",
        },
        {
          lable: "234",
          value: "科室二",
        },
      ],
      tableShow: true,
      tableColum: [],
      tableData: [],
      pieChartShow: false,
      barChartShow: false,
      height: window.innerHeight - 60 - 20 - 56 - 47 * 2 - 90,
    };
  },
  //页面加载事件
  mounted() {
    this.getTableColum();
    this.getTableData();
  },
  methods: {
    //表格列获取
    getTableColum() {
      this.tableColum = [
        {
          prop: "orgName",
          lable: "科室",
        },
        {
          prop: "sql",
          lable: "申请量(u)",
        },
        {
          prop: "sytqsql",
          lable: "上月同期申请量(u)",
        },
        {
          prop: "sqlhb",
          lable: "申请量环比(%)",
        },
        {
          prop: "sqlhbzl",
          lable: "申请量环比增量(%)",
        },
        {
          prop: "sntqsql",
          lable: "上年同期申请量(u)",
        },
        {
          prop: "shqtb",
          lable: "申请量同比(%)",
        },
        {
          prop: "sqltbzl",
          lable: "申请量同比增量(%)",
        },
        {
          prop: "sxl",
          lable: "输血量(u)",
        },
        {
          prop: "sytqsxl",
          lable: "上月同期输血量(u)",
        },
        {
          prop: "sxlhb",
          lable: "输血量环比(%)",
        },
        {
          prop: "sxlhbzl",
          lable: "输血量环比增量(%)",
        },
        {
          prop: "sntqsxl",
          lable: "上年同期输血量(u)",
        },
        {
          prop: "sxltb",
          lable: "输血量同比(%)",
        },
        {
          prop: "sxltbzl",
          lable: "输血量同比增量(%)",
        },
        {
          prop: "sqlsxl",
          lable: "申请量/输血量",
        },
      ];
    },
    getTableData() {
      console.log("获取数据");
      this.tableData = [
        {
          orgName: "内一科",
          sql: "110",
          sytqsql: "1",
          sqlhb: "100",
          sqlhbzl: "10",
          sntqsql: "01",
          shqtb: "01",
          sqltbzl: "45",
          sxl: "45",
          sytqsxl: "45",
          sxlhb: "12",
          sxlhbzl: "45",
          sntqsxl: "25",
          sxltb: "42",
          sxltbzl: "445",
          sqlsxl: "25",
        },
      ];
    },
    selectType(val) {
      if (this.selectTypeVal !== val) {
        if (val === 1) {
          this.tableShow = true;
          this.pieChartShow = false;
          this.barChartShow = false;
          this.buttonType1 = "info";
          this.buttonType2 = "";
          this.buttonType3 = "";
        }
        if (val === 2) {
          this.tableShow = false;
          this.pieChartShow = true;
          this.barChartShow = false;
          this.buttonType1 = "";
          this.buttonType2 = "info";
          this.buttonType3 = "";
        }
        if (val === 3) {
          this.tableShow = false;
          this.pieChartShow = false;
          this.barChartShow = true;
          this.buttonType1 = "";
          this.buttonType2 = "";
          this.buttonType3 = "info";
        }
        this.selectTypeVal = val;
      }
    },
    search() {
      console.log(this.formInline);
    },
    exportData() {
      console.log("导出");
    },
    printData() {
      console.log("打印");
    },
    // handleSizeChange(val) {
    //   this.PageSize = val;
    //   //console.log(`每页：${val}条`);
    // },
    // handleCurrentChange(val) {
    //   this.PageIndex = val;
    //   //console.log(`当前页：${val}`);
    // },
    // currentPage(val) {
    //   console.log(val);
    // },
  },
  components: {
    statisticsTable,
    pieChartStatics,
    barChartStatics,
  },
};
</script>
<style scoped>
.option {
  width: 130px;
}
.buttonType {
  height: 80px;
}
.searchDiv {
  float: left;
  margin-left: 10px;
}
.el-main {
  padding: 10px 5px !important;
}
</style>